<template>
  <div class="engineeringSourcing">
    <div class="myFixed">
      <PageTitle
        :goBack="false"
        title="全国供应商查询"
        :border="false"
        v-if="isFirstLevel"
        class="myFixed1"
      />
      <div v-else>
        <PlugTitle
          :goBack="true"
          title="供应商详情"
          :border="true"
          :back-type="false"
          @go-back="hadleEngineering"
        />
      </div>
      <iframe
        id="companyIframe"
        :class="isFirstLevel ? 'iframeCombined' : 'iframeDetail'"
        width="100%"
        :src="iframeUrl"
      ></iframe>
      <!--      <a-tabs v-model:activeKey="activeKey">-->
      <!--        <a-tab-pane :key="1" tab="工程服务供应商查询">-->
      <!--          <iframe-->
      <!--            id="companyIframe"-->
      <!--            :class="isFirstLevel ? 'iframeCombined' : 'iframeDetail'"-->
      <!--            width="100%"-->
      <!--            :src="iframeUrl"-->
      <!--          ></iframe>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane :key="2" tab="已合作供应商查询" />-->
      <!--      </a-tabs>-->
    </div>
    <!--<iframe id="companyIframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" :style="{height:'1400px'}" src="https://www.jianchayun.com/company/56546856314e567a69/?index=true" />-->
  </div>
</template>
<script lang="ts" setup>
  import DeleteBox from '/@/components/DeleteBox/index.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { onMounted, onUnmounted, ref } from 'vue';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import PlugTitle from '/@/components/PageTitle/plugTitle.vue';
  import { useRoute } from 'vue-router';
  import { getCompanyId, getCompanyInfoUrl, getProjectUrl } from '/@/api/sourcingBigData';
  import { getProjectLedger } from '/@/api/supplierManage';
  import {
    addModel,
    getScoreList,
    downloadRecordPdfApi,
    exportRecord,
  } from '/@/api/supplierRating';
  import {
    addLabel,
    delLabel,
    getLabelHistoryList,
    getLabelList,
    removeLabel,
  } from '/@/api/labelTag';
  import { message } from 'ant-design-vue';
  import { getPlugData, formatCompanyId } from '/@/utils/encodeStr';
  import { steerScroll } from '/@/utils/jskplug';
  import { getDicDetailList } from '/@/api/system/dic';
  import { useRouter } from 'vue-router';
  import ScoreResultDialog from '/@/views/supplierRating/ratingList/components/ScoreResultDialog.vue';
  const Router = useRouter();
  const { t } = useI18n();
  const formRef = ref(null);
  // beforeDestroy(() => {
  //   window.removeEventListener("message", function (e) {
  //     let detail = e.data;
  //     console.log(e,"e.datae.data")
  //     if (detail.currentPath) {
  //       let company = detail.currentPath.indexOf('/company/');
  //       if (company > -1) {
  //         let eId = detail.currentPath.slice(9, detail.currentPath.length - 1);
  //         setCompanyId(eId);
  //       }
  //       isFirstLevel.value = false;
  //     }
  //   })
  // })
  onMounted(() => {
    // window.addEventListener(
    //   'message',
    //   function (e) {
    //     let detail = e.data;
    //     console.log(e,"e.datae.data")
    //     // if (detail.currentPath) {
    //     //   let company = detail.currentPath.indexOf('/company/');
    //     //   if (company > -1) {
    //     //     let eId = detail.currentPath.slice(9, detail.currentPath.length - 1);
    //     //     setCompanyId(eId);
    //     //   }
    //     //   isFirstLevel.value = false;
    //     // }
    //     // window.location.href=url
    //   },
    //   false,
    // );
    let iframe = document.getElementById('companyIframe');
    iframe.onload = () => {
      iframe.contentWindow.postMessage({ method: 'showConditions' }, '*');
      iframe.contentWindow.postMessage({ method: 'layoutHtml' }, '*');
      iframe.contentWindow.postMessage({ method: 'syncScroll' }, '*');
      iframe.contentWindow.postMessage({ hidebreadcrumb: 'hide' }, '*');
    };
  });
  onUnmounted(() => {
    // 监听滚动（iframe的id、页面排除iframe后页面剩下高度[例:80]、增加监听[不传就是移除监听]、父级id[不带默认就是铺满整个页面]]）
    steerScroll(
      'companyIframe',
      navigation,
      footHeight,
      '',
      '',
      '',
      plugData,
      this,
      '会员',
      isFirstLevel.value,
    );
  });
  let isShowDelBox = ref(false);
  let delId = '';
  const route = useRoute();
  let activeKey = ref(1);
  let companyId = '';
  let footHeight = 0;
  let navigation = { isFixed: true, fixedHeight: 0, totalHeight: 0 }; // iframe之外页面顶部对象，ifFixed:是否浮动；fixedHeight：浮动对象高度；totalHeight：顶部整体高度
  let plugData = { domain: '', param: '' }; // 插件相关信息
  let isFirstLevel = ref(true); // 是否是第一层级

  // if (route?.query?.companyId) {
  //   companyId = route?.query?.companyId;
  // } else {
    getCompanyUrl();
  // }

  let iframeUrl = ref('');
  async function setCompanyId(mark) {
    if (mark) {
      const res = await getCompanyId({ mark });
      if (res != companyId) {
        companyId = res;
      }
    }
  }
  async function getCompanyUrl() {
    const res = await getProjectUrl();
    plugData = getPlugData(res, '/search/combined');
    // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];parent:父级;plugData:插件相关url信息;_this:指向当前实例（可忽略）;serviceHotline:开通会员类型
    steerScroll('companyIframe', navigation, footHeight, true, '', '', plugData, this, '会员');
    console.log(res)
    iframeUrl.value = res;
  }


</script>
<style lang="less" scoped>
  :deep(.ant-tabs) {
    min-width: 1240px;
    overflow-x: scroll;
  }
  .engineeringSourcing {
    .remarks {
      width: 100%;
      height: 36px;
      border-radius: 2px;
      background: #f5f7fa;
      line-height: 36px;
      font-size: 12px;
      padding: 0 16px;
      margin-top: 8px;
    }
    .myCard {
      border: 1px solid #e4e7ed;
      margin-top: 16px;
      .myTab {
        display: flex;
        width: 100%;
        height: 40px;
        .tabItem {
          flex: 1;
          text-align: center;
          line-height: 40px;
          background: #f5f7fa;
          cursor: pointer;
          box-sizing: border-box;
        }
        .tabItem.active {
          border-top: 2px solid #c11a20;
          background: #f9e9e9;
          color: #c11a20;
        }
      }
    }
    .myForm {
      padding-left: 68px;
    }
    .addDiv {
      display: flex;
      width: 100%;
      height: 38px;
      background: #f5f7fa;
      padding: 0 16px;
      line-height: 38px;
      margin-top: 12px;
      position: relative;
      .myAddBtn {
        width: 14px;
        height: 14px;
        border-radius: 2px;
        background: #c11a20;
        text-align: center;
        line-height: 14px;
        color: #ffffff;
        margin-top: 12px;
        margin-right: 4px;
      }
      .myRadio {
        position: absolute;
        right: 16px;
        top: 7px;
      }
    }
    .myEditBtn {
      margin-left: 8px;
      color: #c11a20;
      cursor: pointer;
    }
    .list-top {
      .list-count {
        margin-top: 5px;
      }
      display: flex;
      justify-content: space-between;
    }
    .data-list {
      .data-item {
        height: 154px;
        display: flex;
        padding: 16px 16px;
        border-bottom: 1px solid #dcdfe6;
        .company-icon {
          margin-right: 24px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 78px;
          height: 100%;
          img {
            width: 78px;
          }
        }
        .company-info {
          width: calc(100% - 102px);
          .name {
            color: #303133;
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 8px;
          }
          .state {
            width: 40px;
            height: 22px;
            border-radius: 2px;
            background: #e8f7ed;
            text-align: center;
            line-height: 22px;
            font-size: 13px;
            color: #16af44;
            margin-bottom: 12px;
          }
          .info {
            display: flex;
            flex-wrap: wrap;
            .info-item {
              font-size: 13px;
              margin-right: 32px;
              margin-bottom: 8px;
              .info-name {
                color: #909399;
              }
              .info-value1 {
                color: #303133;
              }
              .info-value2 {
                color: #1473dc;
              }
            }
          }
        }
      }
    }
    .mySearchButton {
      margin-left: 196px;
      margin-right: 12px;
    }
  }
  :deep(.ant-tabs-nav) {
    margin-bottom: 0;
  }
  :deep(.ant-tabs-nav-wrap) {
    padding: 0 20px;
    background: #ffffff;
  }
  :deep(.ant-form-item) {
    margin-bottom: 8px;
  }
  .addTagBtn {
    border: 1px solid #1473dc;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1473dc;
    float: right;
    cursor: pointer;
  }
  .iframeCombined {
    height: calc(100vh - 146px) !important;
  }
  .iframeDetail {
    height: calc(100vh - 146px) !important;
  }

  :deep(.ant-form-item-label > label) {
    height: 36px !important;
  }
  .myFixed1 {
    //position: fixed;
    width: calc(100% - 7px);
    //box-sizing: border-box;
    //top: 0px;
    z-index: 10;
  }
  .myFixed {
    position: fixed;
    z-index: 10;
    width: calc(100% - 258px);
    background: #ffffff;
  }
  .main {
    padding-top: 60px;
  }
</style>
